<template>
  <div class="attr">
    <div v-if="currentComponent">
      <a-card :title="t['基本属性']">
        <div>
          <div class="flex g-4">
            <a-input-number v-model="currentComponent.x">
              <template #prepend> X</template>
            </a-input-number>
            <a-input-number v-model="currentComponent.y">
              <template #prepend> Y</template>
            </a-input-number>
          </div>
          <div class="flex g-4 mt-4">
            <a-input-number v-model="currentComponent.w" disabled>
              <template #prepend>W</template>
            </a-input-number>
            <a-input-number v-model="currentComponent.h" disabled>
              <template #prepend> H</template>
            </a-input-number>
          </div>
        </div>
      </a-card>
      <a-card :title="t['基本操作']" class="mt-3">
        <div class="flex gap-2 flex-wrap items-center">
          <a-button status="danger" @click="deleteComponent"> {{ t["删除"] }}</a-button>
          <!-- <a-button @click="edit"> {{ t["编辑"] }} </a-button> -->
          <a-button @click="moveUp"> {{ t["上移一层"] }} </a-button>
          <a-button @click="moveDown"> {{ t["下移一层"] }}</a-button>
        </div>
      </a-card>
    </div>

    <a-card v-else>
      <a-empty />
    </a-card>
    <Layer></Layer>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";

import { deleteComponent, moveDown, moveUp } from "../data/actions";
import { currentComponent } from "../data/data";
import Layer from "./layer/Layer.vue";

const t = translate("公共模块");

const edit = () => {
  router.push({
    path: "/paint",
    query: {
      id: currentComponent.value?.templateId,
      lcd: "1"
    }
  });
};
</script>

<style lang="scss" scoped>
.attr {
  height: 100%;
  width: 300px;
}
</style>
